<template>
  <views class="dubious_logistics">
    <viewTitle :title="'可疑托运单列表'"></viewTitle>
    <div class="search">
      <el-form ref="form" label-width="auto" :inline="true">
        <el-form-item label="物流企业:">
          <el-input type="text" clearable placeholder="请输入关键字" v-model="logistics_enterprise"></el-input>
        </el-form-item>
        <el-form-item label="企业类型:">
          <el-select v-model="company_type" clearable placeholder="请选择">
            <el-option
                    v-for="item in company_type_list"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="到达站点:">
          <el-cascader
                  v-model="station"
                  :options="regionList"
                  @change="handleChange"></el-cascader>
        </el-form-item>

        <el-form-item label="寄件人:">
          <el-input type="text" clearable placeholder="请输入关键字" v-model="sender"></el-input>
        </el-form-item>
        <el-form-item label="寄件人联系方式:">
          <el-input type="text" clearable placeholder="请输入关键字" v-model="sender_phone"></el-input>
        </el-form-item>

        <el-form-item label="收件人:">
          <el-input type="text" clearable placeholder="请输入关键字" v-model="recipients"></el-input>
        </el-form-item>
        <el-form-item label="收件人联系方式:">
          <el-input type="text" clearable placeholder="请输入关键字" v-model="recipients_phone"></el-input>
        </el-form-item>
        <el-form-item label="寄件时间:">
          <el-date-picker
                  v-model="registration_date"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"

          ></el-date-picker>
        </el-form-item>
      </el-form>

      <div class="btn-area">
        <el-button type="primary" @click="getData">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </div>
    </div>
    <div class="table_list">
      <el-table :data="tableList" style="width: 100%" border :header-cell-style="getRowClass">
        <el-table-column type="index" label="序号" width="100"></el-table-column>
        <el-table-column prop="logistics_no" label="托运单号" width="180"></el-table-column>
        <el-table-column prop="handle_status_name" label="状态" width="180"></el-table-column>
        <el-table-column prop="company_name" label="承运物流企业" width="200"></el-table-column>
        <el-table-column :formatter="(row)=>{return row.company_type == 1 ? '快递':'物流'}" label="企业类型" width="120"></el-table-column>
        <el-table-column prop="arrive_region_name" label="送达站点" width="300"></el-table-column>
        <el-table-column prop="post_communicate_name" label="寄件人" width="180"></el-table-column>
        <el-table-column prop="post_communicate_mobile" label="寄件人联系方式" width="180"></el-table-column>
        <el-table-column prop="receive_communicate_name" label="收件人" width="150"></el-table-column>
        <el-table-column prop="receive_communicate_mobile" label="收件人联系方式" width="180"></el-table-column>
        <el-table-column prop="create_time" label="创建时间" width="200"></el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="success"  v-if="$route.query.check.q" @click="toDetail(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex flexR paging">
        <el-pagination
          style="background:#fff; padding:10px 0"
          background
          layout="prev, pager, next,sizes,total, jumper"
          @size-change="(page_size) => {this.pagination.page_size = page_size;this.getData()}"
          @current-change="(page_start) => {this.pagination.page_start = page_start;this.getData()}"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pagination.page_size"
          :total="pagination.total_count"
          :current-page="pagination.current_page"
          :page-count="pagination.page_count"
        ></el-pagination>
      </div>
    </div>
  </views>
</template>


<script>
export default {
  data() {
    return {
      station: [], // 站点
      logistics_enterprise: "", // 物流企业
      sender: "", // 寄件人
      sender_phone: "", // 寄件人联系方式
      recipients: "", // 收件人
      recipients_phone: "", // 收件人联系方式
      tableList: [],
      pagination: {
        page_start: 0, //搜索开始页码
        current_page: 0, //当前页码
        page_count: 0, //总页数
        page_size: 10, //每页数量
        total_count: 0 //总数量
      },
      regionList:[],
      company_type: null,
      company_type_list: [
        {value:null, label:'全部'},
        {value:0, label:'物流'},
        {value:1, label:'快递'}
      ],
      registration_date: []
    };
  },
  computed:{
      post_data() {
          let post = {};
          post.company_name = this.logistics_enterprise||'';
          post.arrive_region = this.station.slice(-1)[0]||0;
          post.post_communicate_name = this.sender||'';
          post.post_communicate_mobile = this.sender_phone||'';
          post.receive_communicate_name = this.recipients||'';
          post.receive_communicate_mobile = this.recipients_phone||'';
          post.pagination = this.pagination;
          post.type = this.company_type;
        if(this.registration_date.length > 0){
          post.create_time_start = this.registration_date[0]/1000;     //开始时间
          post.create_time_end = this.registration_date[1]/1000;     //结束时间
        }
          return post;
      }
  },
  methods: {
    //    修改第一行样式
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background: #FAFAFA ";
      } else {
        return "";
      }
    },
    //    修改是否换行
    changeStyleRow(width) {
      let _width = width - 290 - 350 - 300 - 50 - 25;
      if (_width > 300) {
        this.marginLeft = 25;
      } else {
        this.marginLeft = 0;
      }
    },
    // 获取数据
    getData() {
           this.$raxios.post(
            this.$mapapi.admin_logisticsDubious,{
            data: this.post_data
            }).then(res=>{
          if(res.code==200){
            this.tableList = res.data.list;
            this.pagination = res.data.pagination;
          }else{
            this.tableList = [];
            this.pagination = [];
	          this.$message.error(res.msg)
            return;
          }
        })
    },
    // 去详情
    toDetail(row) {
      this.$toRoutePath({
        path: "/logistics_list/logistics_list_detail",
        edit: true,
        query: {logistics_id:row.logistics_id}
      });
    },
    // 重置
    reset() {
        this.logistics_enterprise = '';
        this.station = '';
        this.sender = '';
        this.sender_phone = '';
        this.recipients = '';
        this.recipients_phone = '';
      this.registration_date = []; // 注册时间
      this.company_type = null; // 企业类型
      this.getData()
    },
    handleChange(value) {
        console.log(value);
    }
  },
  mounted() {
      this.getData();
  },
  created() {
      this.regionList = JSON.parse(localStorage.getItem('regionList')) ||[];
      if( this.regionList.length == 0){
           this.$raxios.post(
              this.$mapapi.admin_getALLRegion,{}
          ).then(res=>{
            if(res.code==200){
            localStorage.setItem('regionList',JSON.stringify(res.data));
            this.regionList = res.data;
            }else{
             this.regionList = [];
	            this.$message.error(res.msg)
              return;
            }
          })      
      }
  }
};
</script>





<style lang="less" :scope="true"  src="@/style/logistics_manager/dubious_logistics.less">
</style>
